<template>
	<view class="message" style="height: 100vh;background-color: #fff;">
		<view>
			<view class="message_item" v-for="(item, index) in list" :key="index" @click="dotClick(item.url)">
				<view class="content">
					<text class="dot"></text>
					<text class="title">{{ item.paperName }}</text>
				</view>
			</view>
		</view>
		<mix-load-more :status="loading"></mix-load-more>
		<popup-active :visible.sync="showHonor" :popScreenList="popScreenList" @toPage="toPage"></popup-active>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import http from '@/common/request.js';
import { getCommonShareInfo, getQueryParams } from '@/common/utils.js';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import popupActive from '@/components/popup-activity/popup-activity.vue';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	onLoad(option) {
		this.medalTaskActionId = option.medalTaskActionId;
	},
	components: {
		mixLoadMore,
		popupActive
	},
	onReachBottom() {
		//当划到最底部的时候触发事件
		if (this.loading != 2) {
			this.mesList();
		}
	},
	onShow() {
		this.getScreenPopInfo();
		this.pageNum = 1;
		this.mesList(true);
	},
	data() {
		return {
			list: [],
			loading: 0,
			pageNum: 1,
			pageSize: 10,
			medalTaskActionId: '',
			memberId: '',
			showHonor: false,
			popScreenList: []
		};
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo })
	},
	mounted() {
		// this.mesList();
	},
	methods: {
		getScreenPopInfo() {
			http('api/sysQuestionnaireInfo/getQuestionPopScreen', { method: 'GET' }).then(result => {
				if (result.code == 200) {
					const list = result.popScreen || [];
					if (list.length > 0) {
						this.showHonor = true;
						this.popScreenList = list;
					}
				}
			});
		},
		mesList(reload) {
			this.loading = 1;
			// 已答
			http('/api/sysQuestionnaireInfo/getUnansweredPaperList', {
				method: 'GET',
				data: { memberId: this.userInfo.userId, pageNum: this.pageNum, pageSize: this.pageSize }
			}).then(result => {
				if (result.code == 200) {
					let data = result.data.paperList || [];
					this.memberId = result.memberId;
					if (reload) {
						this.list = [...data];
					} else {
						this.list = this.list.concat(data); //进行数据的累加
					}
					if (data.length == this.pageSize) {
						this.pageNum++; //页数的++
						this.loading = 0;
					} else {
						this.loading = 2;
					}
					this.loading = this.list.length === 0 ? 3 : this.loading;
				}
			});
		},
		toPage(value) {
			http('/api/duiba/getNoLoginUrl?credits=0&redirect=' + value, { method: 'GET' }).then(result => {
				if (result.code == 200) {
					// #ifdef H5
					location.href = result.data;
					// #endif
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '../home/web_view?url=' + encodeURIComponent(result.data),
						animationType: 'pop-in',
						animationDuration: 200
					});
					//#endif
				}
			});
		},
		updatTodo(medalTaskActionId) {
			http('/api/sysMedalTask/todoTask?medalTaskActionId=' + medalTaskActionId, { method: 'POST' }).then(result => {
				if (result.data.length > 0) {
				}
			});
		},
		dotClick(url) {
			url = url + '&memberId=' + this.memberId;
			const params = getQueryParams(url);
			http('api/sysQuestionnaireInfo/question', { method: 'POST', data: { paperNo: params.paperNo } }).then(result => {
				if (result.code == 200) {
					// #ifdef H5
					location.href = url;
					// #endif

					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '../home/web_view?url=' + encodeURIComponent(url),
						animationType: 'pop-in',
						animationDuration: 200
					});
					// #endif
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.message_item {
	display: flex;
	height: 170rpx;
	align-items: center;
	padding: 0 28rpx;
	background: #fff;
	justify-content: space-between;
	position: relative;
	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 28rpx;
		right: 28rpx;
		height: 2rpx;
		background-color: rgba(102, 100, 93, 0.1);
	}
	.content {
		display: flex;
		align-items: center;
		.dot {
			display: block;
			width: 16rpx;
			height: 16rpx;
			background: #f39800;
			border-radius: 100%;
			margin-right: 10rpx;
		}
		.title {
			font-size: 30rpx;
			color: #66645d;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			// width: 60%;
		}
	}
	.img {
	}
}
</style>
